<template>
	<view class="font singleTopicSelection">
		<view style="background-color: white;height: 300rpx;">
			<view class="title">
				<span>*</span><label>标题</label>
				<uni-easyinput type="textarea" v-model="title" placeholder="请输入内容" autoHeight></uni-easyinput>
			</view>
		</view>
		<label style="margin-left: 30rpx;color: #abafb2;">设置</label>
		<view style="background-color: white;">
			<view class="min-switch">
			  <text class="text">此题必须回答</text>
			  <switch
			    :checked="isMustAnswer"
			    @change="mustAnswer"
			    color="#80b156"
			    style="transform: scale(0.7,0.7)"
			  />
			</view>
			<view class="min-switch">
			  <text class="text">填写提示</text>
			  <switch
				:checked="isWritePrompt"
			    @change="writePrompt"
			    color="#80b156"
			    style="transform: scale(0.7,0.7)"
			  />
			</view>
			<input type="text" class="tipText" v-model="tipContent" placeholder="请填写提示内容" v-if="isWritePrompt"/>
			<view class="min-switch">
			  <text class="text">多行文本</text>
			  <switch
				:checked="multilineText"
			    @change="openMultilineText"
			    color="#80b156"
			    style="transform: scale(0.7,0.7)"
			  />
			</view>
			<view v-show="showSpace">
				<view class="min-switch" >
				  <text class="text">字数限制</text>
				  <switch
					:checked="isSpaceConstraints"
				    @change="spaceConstraints"
				    color="#80b156"
				    style="transform: scale(0.7,0.7)"
				  />
				</view>
				<span style="display: flex;margin: 30rpx;" v-if="isSpaceConstraints">
					<input type="text" class="spaceConstraints" v-model="minNum" placeholder="请填写最小值"  />
					<input type="text" class="spaceConstraints" v-model="maxNum" placeholder="请填写最大值" style="margin-left: 20rpx;"/>
				</span>
			</view>
			<view class="min-switch">
			  <text class="text">不允许重复</text>
			  <switch
				:checked="isNotAllowedToRepeat"
			    @change="notAllowedToRepeat"
			    color="#80b156"
			    style="transform: scale(0.7,0.7)"
			  />
			</view>
			<view class="min-switch">
			  <text class="text">跳题设置</text>
			  <view style="transform: scale(0.7,0.7);font-size: 35rpx;color: #929292;">
				<view class="uni-list-cell-db" @click="jump">
						<view class="uni-input">{{nextTitle.name}}＞</view>
				</view>
			  </view>
			</view>
			<view class="min-switch">
			  <text class="text">属性验证</text>
			  <view style="transform: scale(0.7,0.7);font-size: 35rpx;color: #929292;">
				<view class="uni-list-cell-db">
					<picker @change="changeAttribute" :value="index" :range="propertyVerification" mode = "selector">
						<view class="uni-input">{{attribute}}＞</view>
					</picker>
				</view>
			  </view>
			</view>
			<view class="setting">
				<button style="background-color: #80b156;color: white;" @click="sure">确认</button>
				<button @click.stop="back">返回</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { empty } from "../../uni_modules/uv-ui-tools/libs/function/test";
	import SnowflakeId from "snowflake-id";
	const snowflake = new SnowflakeId({
	    mid: 42,
	    offset: (2019 - 1970) * 31536000 * 1000
	});
	var _this;
	var _this;
	export default{
		data() {
			return {
				formid:"", //问卷id
				title:"", // 题目标题
				isMustAnswer:true, //是否必答
				subjectId:"", //题目id
				isWritePrompt:false, //是否开启填写提示
				tipContent:"", //提示内容
				attribute:"", //属性验证的值
				isSpaceConstraints:false, //是否开启字数限制
				index:0,
				propertyVerification:["无","手机","身份证","邮箱","整数","数字","英文","汉字"],//属性验证的类型
				nextTitle:{subjectId:0,name:"未设置"}, //跳题设置
				multilineText:0 ,//是否开启多行文本
				maxNum:"",	//字数限制最大值
				minNum:"",	//字数限制最小值
				isNotAllowedToRepeat:false,// 是否开启不允许重复
				questionsJumpItems:"",	// 题目跳题的id
				is_nextTitle:false,
				showSpace:true	//是否开启验证，开启则为false
			}
		},
		onLoad(option) {
			this.formid = option.formid
			_this = this;
			if(option.item){
				let data = JSON.parse(option.item)
				this.attribute = data.attribute
				this.isMustAnswer = data.isMustAnswer
				this.isNotAllowedToRepeat = data.isNotAllowedToRepeat
				this.isSpaceConstraints = data.isSpaceConstraints
				this.isWritePrompt = data.isWritePrompt
				this.maxNum = data.maxNum
				this.minNum = data.minNum
				this.multilineText = data.multilineText
				this.questionsJumpItems = data.questionsJumpItems
				this.tipContent = data.tipContent
				this.title = data.title
				if(!empty(data.questionsJumpItems)){
					this.nextTitle = {
						subjectId:data.questionsJumpItems,
						name:"已设置",
					}
				}
			}
			if(option.subjectId){
				this.subjectId = option.subjectId
				this.is_nextTitle = true
				// 请求数据
			}else{
				const id = snowflake.generate(); //运用雪花算法
				_this.subjectId = id //随机生成题目id
				this.is_nextTitle = false
			}
		},
		onShow() {
			var page = getCurrentPages()
			var curren = page[page.length - 1]
			if(curren.data.radiovalue && !empty(curren.data.radiovalue.name)){
				_this.nextTitle = curren.data.radiovalue
				_this.questionsJumpItems = curren.data.radiovalue.subjectId
			}
		},
		methods:{
			sure(){
				if(_this.title == ""){
					uni.showModal({
						content:"请输入题目名称",
						confirmText:"知道了",
						showCancel:false
					})
					return;
				}
				else if(this.isWritePrompt && !this.tipContent){
					uni.showToast({
						title:"请填写提示内容",
						icon:"none"
					})
					return;
				}
				else if(this.isSpaceConstraints && !this.maxNum && !this.minNum){
					uni.showToast({
						title:"请填写最大、最小值",
						icon:"none"
					})
					return;
				}
				else if(+this.maxNum < +this.minNum){
					uni.showToast({
						title:"最大值不能小于最小值",
						icon:"none"
					})
					return
				}
				let data = {
					questionType:3,
					formid:this.formid,
					title:this.title,
					subjectId:this.subjectId,
					isMustAnswer:this.isMustAnswer,
					isWritePrompt:this.isWritePrompt,
					tipContent:this.tipContent,
					multilineText:this.multilineText,
					attribute:this.attribute,
					isSpaceConstraints:this.isSpaceConstraints,
					maxNum:this.maxNum,	//字数限制最大值
					minNum:this.minNum,
					isNotAllowedToRepeat:this.isNotAllowedToRepeat,
					questionsJumpItems:this.questionsJumpItems
				}
				console.log(data);
				this.$request('/QuestionTitle/updateAddFillInQuestion','POST',data)
				.then(res=>{
					console.log(res);
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2]; //上一个页面
					prevPage.setData({
					        temFillData:data
					})
					uni.navigateBack()
				})
			},
			back(){
				uni.navigateBack()
			},
			// 题目是否必答
			mustAnswer:function(e){
				this.isMustAnswer = e.detail.value
			},
			// 是否开启填空提示
			writePrompt:function(e){
				// 关闭提示清空内容
				if(!e.detail.value){
					this.tipContent = ""
				}
				// 展示提示内容框
				this.isWritePrompt = e.detail.value
			},

			// 属性验证
			changeAttribute: function(e) {
				this.index = e.detail.value
				this.attribute = this.propertyVerification[e.detail.value]
				if(this.attribute && this.attribute !== '无'){
					this.isSpaceConstraints = false
					this.showSpace = false
					this.maxNum = ''
					this.minNum = ''
				}else{
					this.showSpace = true
				}
				
			},
			// 开启多行文本
			openMultilineText(e){
				if(e.detail.value){
					this.multilineText = 1
				}else{
					this.multilineText = 0
				}
			},
			// 开启字数限制
			spaceConstraints(e){
				if(e.detail.value){
					this.isSpaceConstraints = e.detail.value
				}else{
					this.isSpaceConstraints = e.detail.value
					this.minNum = ""
					this.maxNum = ""
				}
			},
			notAllowedToRepeat(e){
				this.isNotAllowedToRepeat = e.detail.value
			},
			jump(){
				if(!this.is_nextTitle){
					uni.showModal({
						content:"此题为最后一题,不能设置跳题",
						showCancel:false,
						confirmText:"知道了",
						confirmColor:"#80b156"
					})
					return;
				}
				uni.navigateTo({
					url:"/components/addTitle/nextTitleSetting?type=multi&subjectId="+this.subjectId+'&jumpId='+this.questionsJumpItems
				})
			}
		}
	}
</script>

<style lang="less">
	input{
		font-size: 14px;
	}
	label{
		font-size: 30rpx;
	}
	.deleteOption{
		width: 6%;
		height: 60%;
		margin: 20rpx 30rpx;
				cursor: pointer;
	}
	.singleTopicSelection{
		// width: 100%;
		// height: 100%;
		// position: fixed;
		// top: 0rpx; left: 0rpx; bottom: 0rpx; right: 0rpx;
		background-color: #f3f3f3;
		// transition: .3s;
		// z-index: 999;
		.title{
			width: 90%;
			margin: 0 30rpx;
			span{
				color: red;
			}
		}
		.setting{
			width: 90%;
			margin: 20rpx 30rpx;
			button{
				margin-top: 30rpx;
			}
		}
		.tipText{
			border: 1px solid #abafb2;
			width: 90%;
			margin-left: 30rpx;
			border-radius: 5px;
		}
		.min-switch {
		  height: 80rpx;
		  font-size: 32rpx;
		  margin: 0 20rpx;
		  padding: 20rpx 0;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  background: #fff;
		  border-radius: 5rpx;
		  .text{
		    padding-left: 20rpx
		  }
		  .more{
			  width: 10%;
			  height: 100%;
			  transform: scale(0.7,0.7);
			  cursor: pointer;
		  }
		}
		.spaceConstraints{
			display: inline-block;
			border: 1px solid #ccc;
		}
	}
	.Divider {
		width: 50rpx;
	  border-top: 1px solid #eee;
	  border-bottom: 1px solid #eee;
	}
	.addOption{
		height: 80rpx;
		font-size: 32rpx;
		margin: 0 20rpx;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 5rpx;
		color: #80b156;
	}
</style>